import { StyleSheet, Text, View, Image, Button, TouchableHighlight, ScrollView } from 'react-native'
import React, { useEffect, useState } from 'react'
import { useSearchParams } from 'expo-router/build/hooks'
import { getItem } from './services/hotTrack.d'
import { useRouter } from 'expo-router'
const doctorDetails = () => {
    const [_id, mingname] = useSearchParams()
    const router = useRouter()
    interface Item {
        img: string,
        _id: string,
        mingname: string,
        mingarea: string,
        mingphone: string,
        hospital: string,
        department: string,
        job: string,
        number: number,
        expert: any
    }
    const [itemOne, setItemOne] = useState<Item>({
        img: '',
        _id: '',
        mingname: '',
        mingarea: '',
        mingphone: '',
        hospital: '',
        department: '',
        job: '',
        number: 0,
        expert: {}
    })
    useEffect(() => {
        getDetail()
    }, [])

    const getDetail = async () => {
        let res: any = await getItem({ _id: _id[1] })
        setItemOne(res.data.item)
    }

    const gotoChat = () => {
        router.push({
            pathname: '/zhcFile/chat',
            params: {
                _id: _id[1],
                mingname: `${itemOne.mingname}`
            }
        })
    }
    return (
        <ScrollView>
            <View style={styles.container}>
                <View style={styles.header}>
                    <View style={styles.box}>
                        <View style={styles.boxLeft}>
                            <Image
                                source={{ uri: itemOne.img }} //图片地址
                                style={styles.img}
                            >
                            </Image>
                        </View>
                        <View style={styles.boxRight}>
                            <Text style={{ textAlign: 'center', fontSize: 20, fontWeight: 'bold', marginTop: 10 }}>{itemOne.mingname}</Text>
                            <View style={styles.jobHos}>
                                <View style={{ width: '80%', height: 40, justifyContent: 'space-between', alignItems: 'center' }}>
                                    <Text>{itemOne.job}</Text>
                                    <Text>
                                        {itemOne.hospital} {itemOne.department}
                                    </Text>
                                </View>
                                <View>
                                    <Image
                                        source={require('../../assets/images/right.png')}
                                        style={{ width: 30, height: 30, marginLeft: -50 }}
                                    >
                                    </Image>
                                </View>
                            </View>
                            <View style={{ width: 100, height: 40, marginTop: 20, marginLeft: 20, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                <Button title='私信' onPress={() => {
                                    gotoChat()
                                }}></Button>
                                <View style={{ marginLeft: 20 }}>
                                    <Button title='+关注'></Button>
                                </View>
                            </View>
                        </View>
                    </View>
                </View>
                <View style={styles.content}>
                    <Text>
                        擅长
                    </Text>
                    <View>
                        <Text style={{ fontSize: 12, lineHeight: 30, marginTop: 10 }}>
                            {itemOne.expert.shan}
                        </Text>
                    </View>
                </View>
                <View style={styles.buttom}>
                    <Text>
                        简介
                    </Text>
                    <View>
                        <Text style={{ fontSize: 12, lineHeight: 30, marginTop: 10 }}>
                            {itemOne.expert.desc}
                        </Text>
                    </View>
                </View>

            </View>
        </ScrollView>

    )
}

export default doctorDetails

const styles = StyleSheet.create({
    container: {
        width: '100%',
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        width: '100%',
        height: 180,
        backgroundColor: 'blue',
    },
    box: {
        width: '90%',
        height: 160,
        marginLeft: '5%',
        boxSizing: 'border-box',
        backgroundColor: 'white',
        marginTop: 40,
        display: 'flex',
        flexDirection: 'row',
        borderRadius: 10,
    },
    boxLeft: {
        width: '40%',
        height: '100%',
    },
    img: {
        width: '100%',
        height: '80%',
    },
    boxRight: {
        width: '60%',
        height: '100%',
    },
    jobHos: {
        marginTop: 10,
        width: '100%',
        height: 50,
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
    },
    center: {
        width: '100%',
        height: 60,
        marginTop: 30,
        backgroundColor: 'white',
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    centerLeft: {
        width: '45%',
        height: '50%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    centerRight: {
        width: '45%',
        height: '50%',
        justifyContent: 'center',
        alignItems: 'center',
    },
    content: {
        width: '100%',
        marginTop: 30,
        backgroundColor: 'white',
        padding: 20,
        boxSizing: 'border-box',
        fontSize: 12,
    },
    buttom: {
        width: '100%',
        marginTop: 30,
        backgroundColor: 'white',
        padding: 20,
        boxSizing: 'border-box',
        fontSize: 12,
    }
})